<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Canvas</title>
</head>
<body>
    <div style="height: 600px; background-color: lightblue;">
        <p>滚动向下到达画板</p>
    </div>
    <canvas id="myCanvas" width="400" height="200" style="border: 1px solid black;"></canvas>
    <div style="height: 800px; background-color: lightcoral;">
        <p>继续滚动向下</p>
    </div>

    <script>
        // JavaScript to draw on the canvas
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(10, 10, 100, 100);
        ctx.font = '20px Arial';
        ctx.fillText('Hello World!', 150, 50);
    </script>
</body>
</html>
